<div ng-app="TaskManager">
    <div class="containerInfor">
        <div class="content" ng-controller="taskController">
            <div class="card">
                <div id="target" class="file-drag">
                    <div class="input-wrapper">
                        <div class="input-cover">
                            <button type="button" id="choose" class="button">Choose File</button><span id="notify" class="file-name">No file chosen</span>
                        </div>
                    </div><span class="help-test">or drop file here</span>
                </div>
            </div>
            <form>
                <div class="inputContainer">
                    <input type="text" id="description" class="taskName" placeholder="What do you need to do?" ng-model="newTask">
                    <label for="description">Description</label>
                </div>
                <div class="inputContainer half last">
                    <i class="fa fa-caret-down selectArrow"></i>
                    <select id="category" class="taskCategory" ng-model="newTaskCategory" ng-options="obj.name for obj in categories">
                        <option class="disabled" value="">Choose a category</option>
                    </select>
                    <label for="category">Category</label>
                </div>
                <div class="inputContainer half last right">
                    <input type="date" id="dueDate" class="taskDate" ng-model="newTaskDate">
                    <label for="dueDate">Due Date</label>
                </div>
                <div class="row">
                    <button class="taskInit" ng-click="init()"></button>
                    <button class="taskAdd" ng-click="addNew()"><i class="fa fa-plus icon"></i>Add task</button>
                    <button class="taskDelete" ng-click="deleteTask()"><i class="fa fa-trash-o icon"></i>Delete Tasks</button>
                    <button class="taskPublish" ng-click="publishTask()"><i class="fa fa-cloud-upload icon"></i>Publish Tasks</button>
                </div>
            </form>
            <ul class="taskList">
                <li class="taskItem" ng-repeat="taskItem in taskItem track by $index" ng-model="taskItem"><input type="checkbox" class="taskCheckbox" ng-model="taskItem.complete">
                    <span class="complete-{{taskItem.complete}}">{{taskItem.description}}</span>
                    <span class="category-{{taskItem.category}}">{{taskItem.category}}</span>
                    <span class="category-{{taskItem.edition}}">{{taskItem.edition}}</span>
                    <strong class="taskDate complete-{{taskItem.complete}}"><i class="fa fa-calendar"></i>{{taskItem.date | date : 'mediumDate'}}</strong>
                </li>
            </ul>
            <!-- taskList -->
        </div>
        <!-- content -->
    </div>
    <!-- container -->
</div>